<!--
 * @file 百度地图容器组件
 * @description 基于百度地图JavaScript API GL的地图容器组件，提供地图的渲染、控件显示和事件处理
 * @module components/monitor/map/MapContainer
 * @date 2024-08-14
 * @reference https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
 * 
 * @description 功能概述:
 * - 提供可配置的地图渲染容器
 * - 处理地图加载状态和错误反馈
 * - 封装常用地图操作接口(中心点、缩放、视图范围等)
 * - 提供地图类型和控件配置选项
 * - 通过事件通知机制与父组件通信
 * 
 * @exports {Component} MapContainer - 地图容器组件
 * @exports {Object} map - 暴露地图实例给父组件
 * @exports {Function} setCenter - 设置地图中心点
 * @exports {Function} setZoom - 设置地图缩放级别
 * @exports {Function} setMapType - 设置地图类型
 * @exports {Function} fitMapBounds - 调整地图视野以显示所有点
 * @exports {Function} resetMap - 重置地图视图
 -->
<template>
  <div class="map-container" :id="containerId" ref="mapContainerRef">
    <!-- 加载状态 -->
    <div v-if="loading && !error" class="map-container__loading">
      <i class="fas fa-spinner fa-spin map-container__loading-icon"></i>
      <span class="map-container__loading-text">地图加载中...</span>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="map-container__error">
      <p class="map-container__error-message">{{ error }}</p>
      <button class="map-container__error-retry" @click="handleRetry">重试</button>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore - uni-app环境下Vue导入需要忽略类型检查
import { BAIDU_MAP_CONFIG } from '@/config/map.config';
import { useMapContainer } from '@/hooks';
import { useMapStore } from '@/stores/modules/map';

// 组件属性
const props = defineProps({
  center: {
    type: Object,
    default: () => BAIDU_MAP_CONFIG.defaultCenter
  },
  zoom: {
    type: Number,
    default: BAIDU_MAP_CONFIG.defaultOptions.zoom
  },
  containerId: {
    type: String,
    default: 'bmap-container'
  },
  showBuildings: {
    type: Boolean,
    default: true
  },
  mapType: {
    type: String,
    default: 'normal'
  },
  showControls: {
    type: Boolean,
    default: true
  },
  showScaleControl: {
    type: Boolean,
    default: true
  },
  showZoomControl: {
    type: Boolean,
    default: true
  },
  showMapTypeControl: {
    type: Boolean,
    default: true
  },
  showLocationControl: {
    type: Boolean,
    default: true
  },
  showCityListControl: {
    type: Boolean, 
    default: true
  },
  show3DControl: {
    type: Boolean,
    default: true
  },
  lazyLoad: {
    type: Boolean,
    default: false  // 默认不启用懒加载，直接加载地图
  }
});

// 组件事件
const emit = defineEmits(['ready', 'click', 'move-end', 'reset']);

// 使用地图Store
const mapStore = useMapStore();

// 使用地图容器钩子
const {
  mapContainerRef,
  map,
  initialized,
  loading,
  error,
  trackPluginLoaded,
  initMap,
  setCenter,
  setZoom,
  setMapType,
  fitMapBounds,
  resetMap,
  handleRetry
} = useMapContainer({
  // 传递属性
  center: props.center,
  zoom: props.zoom,
  containerId: props.containerId,
  showBuildings: props.showBuildings,
  mapType: props.mapType,
  showControls: props.showControls,
  showScaleControl: props.showScaleControl,
  showZoomControl: props.showZoomControl,
  showMapTypeControl: props.showMapTypeControl,
  showLocationControl: props.showLocationControl,
  showCityListControl: props.showCityListControl,
  show3DControl: props.show3DControl,
  lazyLoad: props.lazyLoad,
  
  // 事件回调
  onReady: (mapInstance) => emit('ready', { map: mapInstance }),
  onClick: (e) => emit('click', e),
  onMoveEnd: (e) => emit('move-end', e),
  onReset: () => emit('reset')
});

// 导出方法给父组件使用
defineExpose({
  map,
  setCenter,
  setZoom,
  setMapType,
  fitMapBounds,
  resetMap
});
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  
  // 加载状态样式
  &__loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    
    &-icon {
      font-size: 32px;
      color: #1890ff;
      margin-bottom: 16px;
    }
    
    &-text {
      font-size: 14px;
      color: #333;
    }
  }
  
  // 错误提示样式
  &__error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    
    &-message {
      font-size: 14px;
      color: #ff4d4f;
      margin-bottom: 16px;
    }
    
    &-retry {
      padding: 6px 15px;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #ff4d4f;
      background-color: transparent;
      color: #ff4d4f;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        background-color: #ff4d4f;
        color: #fff;
      }
    }
  }
}
</style> 